@import "./colors";
@import "./mixins";

.app-source-history, .app-history {
  > header {
    padding: 2rem;
    padding-bottom: 0;

    > h2 {
      margin: 0;
      margin-bottom: 1rem;
      font-weight: 600;
    }

    > nav {
      margin-bottom: 1rem;
    }
  }

  .pretty-select {
    margin: 0px 2rem;
    margin-bottom: 1rem;
  }

  .deploy-btn-container {
    padding: 1rem 2rem;
  }

  .merge-confirm-btn {
    @extend %btn-green;
    @extend %btn-block;
  }
}

.app-history > section > div > ul {
  list-style: none;
  margin: 0;
  padding: 0;

  > li {
    padding: 1rem 2rem;

    border-bottom: 1px solid $grayBlueColor;

    &.even {
      background-color: darken($whiteColor, 1%);
    }
  }

  &:last-of-type > li:last-of-type {
    border-bottom: 0;
  }
}

.app-history-event > .pretty-radio {
  display: -webkit-flex;
  display: flex;
  flex-flow: row;
  -webkit-flex-flow: row;

  padding-left: 42px;

  > .dot, > input {
    top: calc(50% - 11px) !important;
    left: 11px !important;
    right: auto;
  }

  > .body {
    display: -webkit-flex;
    display: flex;
    flex-flow: column;
    -webkit-flex-flow: column;
  }
}

.app-history > section > div > ul > li {
  border-left: 6px solid transparent;
  &.deployed {
    border-left: 6px solid $greenColor;
  }
}
